/**
 * 配置开发环境常用的配置: 让代码运行
 *    项目运行指令:         Tips: 这两个指令都被全局安装 npm xxx -g
 *        webpack 会将打包结果输出出去
 *        webpack-dev-server 只会在内存中编译打包, 没有输出
 *
 *    source-map: 一种提供源代码到构建后代码映射技术 (如果构建代码出错了, 通过映射可以追踪到源代码错误位置)
 *
 *      [inline-|hidden-|eval][nosources-][cheap-[module-]]source-map
 *
 *      source-map: 外部
 *        错误代码准确信息 和 源代码的错误位置
 *      inline-source-map: 内联
 *        只生成一个内联source-map
 *        错误代码准确信息 和 源代码的错误位置
 *      hidden-source-map: 外部
 *        错误代码准确信息, 但是没有错误位置
 *        不能追踪源代码错误, 只能提示到构建后代码的错误位置
 *
 *      eval-source-map: 内联
 *        每一个文件都生成对应的source-map, 都在eval
 *        错误代码准确信息 和 源代码的错误位置
 *      nosources-source-map: 外部
 *        错误代码准确信息, 但是没有任何源代码信息
 *      cheap-source-map: 外部
 *        错误代码准确信息 和 源代码的错误位置
 *        只能精确到行
 *      cheap-module-source-map: 外部
 *        错误代码准确信息 和 源代码的错误信息
 *        module会将loader的source map加入
 *
 *      内联和外部的区别: 1.外部生成了文件, 内联没有   2.内联构建速度更快
 *
 *      开发环境: 速度快, 调试更友好
 *          速度快(eval > inline > cheap > ...)
 *            eval-cheap-source-map
 *            eval-source-map
 *          调试更友好
 *            source-map
 *            cheap-module-source-map
 *            cheap-source-map
 *
 *         --> eval-source-map  /  eval-cheap-module-source-map
 *
 *      生产环境: 源代码要不要隐藏? 调试要不要友好
 *          内联会让代码体积变大, 所以在生成环境不用内联
 *          nosources-source-map 全部隐藏
 *          hidden-source-map   只会隐藏代码, 会提示构建后代码错误信息
 *
 *        --> source-map / cheap-module-source-map
 */

const HtmlWebpackPlugin = require('html-webpack-plugin');
const { resolve } = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

const commonCssLoader = [
  {
    loader: MiniCssExtractPlugin.loader,
    options: {
      publicPath: '../'
    }
  },
  'css-loader',
  {
    loader: 'postcss-loader',
    options: {
      ident: 'postcss',
      plugins: () => [
        require('postcss-preset-env')()
      ]
    }
  }
]
module.exports = {
  entry: ['./src/index.js', './src/index.html'],
  output: {
    filename: 'js/built.js',
    path: resolve(__dirname, 'build')
  },
  mode: 'development',
  module: {
    rules: [
      // 配置css
      {
        test: /\.(css)$/,
        use: [...commonCssLoader],
      },
      // 配置less
      {
        test: /\.(less)$/,
        use: [...commonCssLoader, 'less-loader'],
      },
      // 配置图片
      {
        test: /\.(jpg|png|gif)$/,
        loader: 'url-loader',
        options: {
          limit: 10 * 1000,
          name: '[hash:8].[ext]',
          // Tips: webpack v4.44.6版本问题, 使用esModule关闭es6模块化
          esModule: false,
          // 配置outputPath可以将图片资源单独打包到 build/img/ 目录中
          outputPath: 'img'
        }
      },
      {
        test: /\.(html)$/,
        loader: 'html-loader',
        options: {
          name: '[hash:8].[ext]',
        }
      },
      // 配置其他资源, 如字体
      {
        exclude: /\.(css|less|js|json|html|jpg|png|gif)$/,
        loader: 'file-loader',
        options: {
          name: '[hash:8].[ext]',
          outputPath: 'media'
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/index.html"
    }),
    // 2.将css提取到单独文件
    new MiniCssExtractPlugin({
      filename: 'css/app.css'
    }),
  ],
  devServer: {
    contentBase: resolve(__dirname, 'build'),
    port: 3000,
    compress: true,
    // 开启HMR功能
    // 当修改了
    hot: true
  },
  devtool: 'source-map'
}
